<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>联系我</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Bootstrap styles -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">


    <!-- Font-Awesome -->
    <link rel="stylesheet" href="/static/css/font-awesome/css/font-awesome.min.css">

    <!-- Google Webfonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600|PT+Serif:400,400italic' rel='stylesheet'
          type='text/css'>

    <!-- Styles -->
    <link rel="stylesheet" href="/static/css/style.css" id="theme-styles">

    <!--[if lt IE 9]>      
        <script src="/static/js/vendor/google/html5-3.6-respond-1.1.0.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
        var xmlHttpRequest = null;

        function ajaxRequest()
        {
            if(window.ActiveXObject) // IE浏览器
            {
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if(window.XMLHttpRequest) // 除IE以外的其他浏览器
            {
                xmlHttpRequest = new XMLHttpRequest();
            }
            if(null != xmlHttpRequest)
            {
                var name = document.getElementById("name").value;
                var email = document.getElementById("email").value;
                var body = document.getElementById("body").value;

                // 准备向服务器发出一个请求

                /*
                 * GET方式向服务器发出一个请求
                 * xmlHttpRequest.open("GET", "AjaxServlet?v1=" + v1 + "&v2=" + v2, true);
                 */

                 /*
                  * POST方式向服务器发出一个请求
                  */
                xmlHttpRequest.open("POST", "contact_message", true);

                // 当发生状态变化时就调用这个回调函数
                xmlHttpRequest.onreadystatechange = ajaxCallBack;

                // 使用post提交时必须加上下面这行代码
                xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                // 向服务器发出一个请求
                xmlHttpRequest.send("name=" + name + "&email=" + email + "&body=" + body);
            }
        }

        function ajaxCallBack()
        {
            if(xmlHttpRequest.readyState == 4)
            {
                if(xmlHttpRequest.status == 200)
                {
                    var ret_content = xmlHttpRequest.responseText;
                    console.log(ret_content);
                    var ret_obj = JSON.parse(ret_content);
                    if (ret_obj.result != "success")
                    {
                        alert("留言失败");
                    }
                    else
                    {
                        alert("留言成功");
                        document.getElementById("name").value = "";
                        document.getElementById("email").value = "";
                        document.getElementById("body").value = "";
                    }
                }
            }
        }
        {#        function on_submit() {#}
        {#            //发送到后台#}
        {#            var name = $("#name").val();#}
        {#            var email = $("#email").val();#}
        {#            var body = $("#body").val();#}
        {#            var submit_content = name + "|||" + email + "|||" + body;#}
        {#            console.log(submit_content);#}
        {#            $.post("/contact_message/", submit_content, function (ret) {#}
        {#                console.info(ret.result);#}
        {#                if (ret.result == "success") {#}
        {#                    //更新页面#}
        {#                    $("#name").text("");#}
        {#                    $("#email").text("");#}
        {#                    $("#body").text("");#}
        {#                    window.alert("留言已提交");#}
        {#                }#}
        {#                else {#}
        {#                    window.alert("留言失败");#}
        {#                }#}
        {#            });#}
        {#        }#}
        {#        $(document).ready(function () {#}
        {#            $("button").click(function () {#}
        {#                $.post("/contact_message/",#}
        {#                    {#}
        {#                        name: "Donald Duck",#}
        {#                        city: "Duckburg"#}
        {#                    },#}
        {#                    function (data, status) {#}
        {#                        alert("数据：" + data + "\n状态：" + status);#}
        {#                    });#}
        {#            });#}
        {#        });#}
    </script>
</head>
<body>
<header>
    <div class="widewrapper masthead">
        <div class="container">
            <a href="index.html" id="logo">
                <img src="/static/img/blog_logo.png" alt="clean Blog">
            </a>

            <div id="mobile-nav-toggle" class="pull-right">
                <a href="#" data-toggle="collapse" data-target=".clean-nav .navbar-collapse">
                    <i class="fa fa-bars"></i>
                </a>
            </div>

            <nav class="pull-right clean-nav">
                <div class="collapse navbar-collapse">
                    <ul class="nav nav-pills navbar-nav">

                        <li>
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="about.html">About</a>
                        </li>
                        <li>
                            <a href="contact.html">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>

        </div>
    </div>

    <div class="widewrapper subheader">
        <div class="container">
            <div class="clean-breadcrumb">
                <a href="#">联系我</a>
            </div>
            <div class="clean-searchbox">
                <form action="#" method="get" accept-charset="utf-8">

                    <input class="searchfield" id="searchbox" type="text" placeholder="Search">
                    <button class="searchbutton" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</header>

<div class="widewrapper main">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 clean-superblock" id="contact">
                <h2>Contact</h2>

                <form action="#" method="get" accept-charset="utf-8" class="contact-form">
                    <input type="text" name="name" id="name" placeholder="Name" class="form-control input-lg">
                    <input type="email" name="email" id="email" placeholder="Email" class="form-control input-lg">
                    <textarea rows="10" name="body" id="body" placeholder="Your Message"
                              class="form-control input-lg"></textarea>
                    <div class="buttons clearfix">
                        <button type="button" class="btn btn-xlarge btn-clean-one" name="btn_submit" id="btn_submit" onclick="ajaxRequest()">
                            提交
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<footer>
    <div class="widewrapper footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4 footer-widget">
                    <h3><i class="fa fa-user"></i>About</h3>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi laboriosam nostrum consequatur
                        fugiat at, labore praesentium modi, quasi dolorum debitis reiciendis facilis, dolor saepe sint
                        nemo, earum molestias quas.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, error aspernatur assumenda
                        quae eveniet.</p>
                </div>

                <div class="col-md-4 footer-widget">
                    <h3><i class="fa fa-pencil"></i> Recent Post</h3>
                    <ul class="clean-list">
                        <li><a href="">Clean - Responsive HTML5 Template</a></li>
                        <li><a href="">Responsive Pricing Table</a></li>
                        <li><a href="">Yellow HTML5 Template</a></li>
                    </ul>
                </div>

                <div class="col-md-4 footer-widget">
                    <h3><i class="fa fa-envelope"></i>Contact Me</h3>

                    <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil fugiat, cupiditate veritatis
                        excepturi tempore explicabo.</p>
                    <div class="footer-widget-icon">
                        <i class="fa fa-facebook"></i><i class="fa fa-twitter"></i><i class="fa fa-google"></i>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="widewrapper copyright">
        Copyright 2015
    </div>
</footer>

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/modernizr.js"></script>


</body>
</html>